
<!DOCTYPE html>
<html>
<head>
    <title>OWl-UI</title>
    <link rel='stylesheet' href='/stylesheets/home.css' />
    <script type="module" src="owl-music/owl-music.js"></script>
    <script type="module" src="owl-slides/owl-slides.js"></script>
    <script type="module" src="owl-slides/owl-slide.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<!--<div  class="owl-bluring-bg"></div>-->
<%include header.ejs%>

<div class="show-box">


    <p class="title">快速 轻量</p>
    <div class="info">
           从这里开始让Web开发更有乐趣
    </div>

    <!--<div class="btn">-->
        <!--<p style="text-align: center;font-size: 18px;padding-top: 9px;color: white">立即体验</p>-->
    <!--</div>-->

    <div class="img-show">
      <p style="text-align: center"> <img  style="width: 400px;margin-top: 0px" src="images/owl.png"></p>
    </div>

</div>

<div class="controller">
    <div class="icon-info">
        <img src="/images/shezhi.png">
        <h4 style="text-align: center;font-size: 14px">owl ui 的力量</h4>
    </div>

    <div class="menus">
        <div class="menu-child">
            <img class="menu-icon" src="/images/comments.png">
            <h5 class="menu-text">语义化标签</h5>
        </div>

        <div class="menu-child">
            <img class="menu-icon" src="/images/sends.png">
            <h5 class="menu-text">事件监听</h5>

        </div>

        <div class="menu-child">
            <img class="menu-icon" src="/images/database.png">
            <h5 class="menu-text">数据绑定</h5>
        </div>

    </div>

</div>


<div class="show-before">

    <p class="show-title" >省时&省力</p>
    <h4 class="show-text-info">不需要安装环境，所有组件开箱即用，组件按需引入</h4>

</div>

<div class="show-exp">

    <div class="show-p1">

        <div class="show-left">

           <p class="exp-title">一个标签的事</p>
            <div class="exp-info" style="">
                 一行代码构建复杂组件，节省你的时间。
                和Owl UI 一起加入 Web 组件革命!

            </div>
        </div>
        <div class="show-right" >

            <img src="/images/bsp1.png">
        </div>
    </div>
</div>

<div class="show-exp">

    <div class="show-p1">

        <div class="show-right" style="margin-left: 8%">

            <img src="/images/ps4p.png">

        </div>

        <div class="show-left" style="margin-left: 2px!important;">

            <p class="exp-title">灵活-高效-个性</p>
            <div class="exp-info">
               内置大量高效组件，pinterest布局，毛玻璃，Toast，MusicPlayer......
            </div>
        </div>

    </div>

</div>


<div class="show-exp" style="padding-bottom: 60px!important;">

    <div class="show-p1">

        <div class="show-left">

            <p class="exp-title">正在路上</p>
            <div class="exp-info">
               更多实用组件正在赶来。推送？分享？更高效？
                拭目以待....
            </div>
        </div>
        <div class="show-right">

            <img src="/images/dbs.png">

        </div>
    </div>
</div>




<div class="how-log">

    <p class="show-title">它是如何工作的？</p>
    <br>
    <br>
    <h5 class="show-text-info">
        <a href="https://www.ibm.com/developerworks/cn/web/wa-polymer/" style="font-size: 24px;text-decoration:none">[ &nbsp;LINK!&nbsp;]</a>
    </h5>

    <img class="how-work" src="/images/zhifeiji.png">


</div>
<!--<p style="position: absolute;top: calc(100% - 120px)"></p>-->
<%include footer.ejs%>

</body>
</html>
